<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复诊详情</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../common/css/vant-index.css" />
    <link rel="stylesheet" href="../css/monitor.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script><script src="../../base.js"></script>
    <script src="../../common/js/vue.global.prod.js"></script>
    <!-- 引入 viewer 图片预览样式文件 -->
    <link href="../../common/css/viewer.css" rel="stylesheet" />
    <style>
        body {
            background-color: #f3f3f3;
        }

        .icon {
            display: inline-block;
            border-radius: 15px;
            height: 0.9rem;
            width: 0.4rem;
            margin-left: 0.8rem;
            margin-right: 0.5rem;
            background-color: rgb(18, 8, 161);
        }

        .container {
            border: 1px solid #f5f5f5;
            background-color: #fff;
            box-shadow: -1px 5px 5px #ececec;
            border-radius: 10px;
            margin: 0.6rem;
            padding: 0;
            /*height: 15rem;*/
            position: relative;
        }

        .container1 {
            border: 1px solid #f5f5f5;
            box-shadow: -1px 5px 5px #ececec;
            border-radius: 40px;
            margin: 0.6rem;
            padding: 0;
            background-color: #fff;
            height: auto;
            position: relative;
        }

        .container2 {
            border: 1px solid #f5f5f5;
            box-shadow: -1px 5px 5px #ececec;
            border-radius: 40px;
            margin: 0.6rem;
            padding: 0;
            background-color: #fff;
            height: auto;
            position: relative;
        }

        .van-cell {
            border-radius: 15px;

        }

        .visit_img {
            margin-top: 1.8rem;
            margin-left: 0.8rem;
            width: 66px;
            height: 66px;
            border-radius: 66px;
        }

        .img_icon {
            position: relative;
            margin-left: 1rem;
            width: 0.8rem;
            height: 0.8rem;
            vertical-align:  middle;
            display: block;
        }

        .visit_name {
            margin-left: 0.8rem;
            margin-right: 1rem;
            font-size: 16px;
            color: rgba(81, 81, 81, 100);
        }

        .visit_value {
            position: relative;
            margin-left: 0.5rem;
        }

        .text_color {
            color: rgba(62, 62, 62, 100);

            font-size: 14px;
        }

        .visit_button {
           	width: 100%;
            height: 31px;
        }

        p {
            margin: 0.5rem 0;
        }

        .process_img {
            width: 2rem;
            height: 2rem;
        }

        .text_color1 {
            color: rgba(161, 161, 161, 100);
            font-size: 14px;
        }

        .end {
            width: 15rem;
            height: 3rem;
            margin: 3rem auto;
        }

        .end_btn {
            width: 15rem;
            height: 3rem;
            margin: 0 auto;
        }

        .van-cell__value {
            position: relative;

        }

        .div1 {
            /*position: absolute;
            top: 9rem;
            left: 5rem;*/
           	display: inline-block;
           	width: 60%;
           	margin-left: 20%;
           	margin-top: 10px;
            margin-bottom: 1rem
        }

        .container1>.van-cell>.van-cell__title {
            flex: 3;
        }

        .container2>.van-cell>.van-cell__value {
            text-align: left;
            padding-left: 14px;
        }
    </style>

</head>

<body>
    <div id="app" v-cloak v-show="ShowPage">
        
        <div style="margin-top: 0.6rem;display: flex;align-items: center;">
            <span
                    style="display:inline-block;width: 6px;background-color: #01CD9C;
                    height: 20px;line-height: 20px;border-radius: 4px;text-align: center;left: 10px;top: 103px;margin-left: 0.8rem;margin-right: 0.5rem;" alt=""></span>
            <span style="left: 26px; 
            position: absolute;
            top: {{titletop}}
            width: 64px;
            height: 23px;
            line-height:23px;
            color: rgba(62, 62, 62, 100);
            font-size: 16px;
            text-align: center;
            font-family: PingFangSC-regular;">个人信息</span>
            
        </div>
        <div class="container van-clearfix" id="container">
            <div style="float:left;width: 25%;">
            	<img v-if="!list.patientsImg" src="../img/logo.png" class="visit_img">
                <img v-if="list.patientsImg" :src="list.patientsImg" class="visit_img">
            </div>
            <div style="float:left;margin-top: 1rem;width: 70%;">
                <p>
                    <span class="visit_name">{{list.patientsName}}</span>
                    <span class="visit_value text_color1">{{list.age}}岁</span>
                    <span style="display: inline-block;"><img src="../img/follow/woman.png" class="img_icon" v-if="list.patientsSex==2"></span>
                    <span style="display: inline-block;"><img src="../img/follow/men.png" class="img_icon" v-if="list.patientsSex==1"></span>

                </p>
                <p style="margin-left: 0.8rem;color: rgba(161, 161, 161, 100);
                font-size: 14px;">糖尿病类型：<span class="text_color">{{list.patientsDiabetisTypeName}}</span>
                </p>
                <p style="margin-left: 0.8rem;color: rgba(161, 161, 161, 100);
                font-size: 14px;">确诊日期：<span class="text_color">{{list.patientsConfirmedDate}}</span></p>
                <p v-if="list.patientsDesc" style="margin-left: 0.8rem;color: rgba(161, 161, 161, 100);
                font-size: 14px;">简要病史：<span class="text_color">{{list.patientsDesc}}</span>
                </p>

            </div>
            <div class="div1" v-if="status==4">
                <van-button round :color="color" :disabled="disabled" @click="confirm" class="visit_button"
                    id="statusValue">
                    {{statusValue}}
                </van-button>
            </div>
        </div>
        <div style="position: relative;">
			<div style="display:flex;justify-content: space-between;margin:0 0.6rem;align-items:center;">
				<div style="display: flex">
					<span style='display: inline-block;background-color: #01CD9C;width: 6px;height: 20px;border-radius: 4px;'></span>
					<span style="margin-left: 5px;color: rgba(62, 62, 62, 100);font-size: 16px;">复诊流程 <van-icon name="replay" color="#595757" v-if='status==4' @click='replay'/></span>
				</div>
				<span style="color: rgba(62, 62, 62, 100);
				font-size: 16px;">{{time}}</span>
			</div>
            
            <div class="container1">
                <van-cell v-for="item in list1" key="index">
                    <template #title>
                        <span class="custom-title">{{item.projectName}}</span>
                    </template>
                    <template #value>
                        <div v-if="item.projectStatus==1" style="position: absolute;right: 0;top: 50%;transform: translate(-50%,-50%);">
                        		<img src="../img/follow/complete.png" class="process_img">
                        </div>
                        <div v-if="item.projectStatus==0" style="position: absolute;right: 0;top: 50%;transform: translate(-50%,-50%);">
                        		<img src="../img/follow/incomplete.png" class="process_img">
                        </div>
                    </template>
                    <template #label>
                        <div class="custom-title">详情：{{item.projectDetail}}</div>
                        <div class="custom-title" v-if="item.executor">执行人：{{item.executor}}</div>
                        <div class="custom-title" v-if="item.remark">备注：{{item.remark}}</div>

                    </template>
                </van-cell>
            </div>
        </div>
        <div style="position: relative;" v-if="status==2">
            <!-- <span><img src="../img/follow/rectangle1.png"
                    style="width: 6px;
                height: 20px;line-height: 20px;border-radius: 4px;text-align: center;position: absolute; margin-left: 0.8rem;margin-right: 0.5rem;" alt=""></span>
            <span style="margin-left: 1.8rem;color: rgba(62, 62, 62, 100);
            font-size: 16px;">我的评价</span> -->
			<div style="display:flex;margin:0 0.6rem;align-items:center;">
				<span style='display: inline-block;background-color: #01CD9C;width: 6px;height: 20px;border-radius: 4px;'></span>
				<span style="margin-left: 5px;color: rgba(62, 62, 62, 100);font-size: 16px;">我的评价 <van-icon name="replay" color="#595757" v-if='status==4' @click='replay'/></span>
			</div>
            <div class="container2" v-if="flupEvaluation">
                <van-cell v-if='value1'>
                    <template #title>
                        <span class="custom-title">服务</span>
                    </template>
                    <template #value>
                        <van-rate v-model="value1" readonly :size="25" color="#ffd21e" void-icon="star"
                            void-color="#eee" />
                    </template>
                </van-cell>
                <van-cell v-if='value2'>
                    <template #title>
                        <span class="custom-title">舒适度</span>
                    </template>
                    <template #value>
                        <van-rate v-model="value2" readonly :size="25" color="#ffd21e" void-icon="star"
                            void-color="#eee" />
                    </template>
                </van-cell>
                <van-cell v-if='value3'>
                    <template #title>
                        <span class="custom-title">设备</span>
                    </template>
                    <template #value>
                        <div>
                            <van-rate v-model="value3" readonly :size="25" color="#ffd21e" void-icon="star"
                                void-color="#eee" />
                        </div>
                    </template>
                </van-cell>
                <van-cell v-if='patientSuggest'>
                    <template #title>
                        <span class="custom-title">其他建议</span>
                    </template>
                    <template #value>
                        <span class="custom-title">{{patientSuggest}}</span>
                    </template>
                </van-cell>
            </div>
        		<div class="container" style="text-align: center;" v-else @click='linkToEval'>
        			<img src="../img/follow/none_eval.png" style="width: 40%;" />
                <p style="font-size: 12px;color: rgba(0, 0, 0, 0.45);">复诊已结束，点此进行满意度评价</p>
        		</div>
        </div>
		
    </div>
</body>
<script src="../../common/js/index.umd.js"></script>
<script src="../../common/js/url.min.js"></script>
<script src="../../common/js/vant.min.js"></script>
<script type="module">

    import {
        getAction,
        postAction,
        getUrl,
    } from "../../common/js/api/vue3-axios-utils.js";

	
    const app = Vue.createApp({

        data() {
            return {
                url: {
                    getfollowList: "/108/01/1080104",
                    getprocess: "/flup/flow",
                    setFollowStatus:'/flup/patient/status/update'
				},
                id: '',
                statusValue: '复诊开始',
                list: [],
                list1: [],
                value1: '',
                value3: '',
                time: '',
                value2: '',
                patientSuggest: '',
                color: '#01CD9C',
                disabled: false,
                status: '',
                titletop:"55px",
                flupEvaluation:'',
                ShowPage:false

            }
        },
        created() {
        	this.patientid = url('?userid')
            this.getinfo()
            this.getfollowList()
            this.getprocess()
			console.log('list',this.list)
		},
        methods: {
            confirm() {
            		this.setFollowStatus()
            		//window.location.href = './reception.html?userid='+this.patientid
            	},
            // end() {
            // 		window.location.href = './endVisit.html?userid='+this.patientid
            // 	},
            getinfo() {
            		this.id = url('?flupid')
            },
            getfollowList() {
				let pid = this.patientid
				let params = {
	                	patientId: pid
	            	};
                let url = getUrl() + this.url.getfollowList;
                postAction(url, params).then((res) => {
                    if (res.data.success) {
                    		this.ShowPage = true
							this.list = res.data.result
					}
                })

            },
			setFollowStatus() {
                let url = getUrl() + this.url.setFollowStatus;
                postAction(url, {flupId:this.id,type:1}).then((res) => {
                    if (res.data.success) {
                    		console.log('res',res.data.result)
                    		this.getprocess()
                        //this.list = res.data.result
                    }
                })

            },
            getprocess() {
                let params = {
                    flupId: this.id
                };
                let url = getUrl() + this.url.getprocess;
                getAction(url, params).then((res) => {
                    if (res.data.success) {
                    		document.title='复诊详情'
                        if (res.data.result.flupEvaluation !== null) {
                        		this.flupEvaluation = res.data.result.flupEvaluation
                            this.patientSuggest = res.data.result.flupEvaluation.otherSuggest
                            this.value1 = res.data.result.flupEvaluation.serviceEvaluation
                            this.value2 = res.data.result.flupEvaluation.equipmentEvaluation
                            this.value3 = res.data.result.flupEvaluation.comfortEvaluation
                        }

                        this.list1 = res.data.result.flupFLowItems
                        this.time = res.data.result.flupBasicInfo.flupDate
                        this.status = res.data.result.flupStatus
                        if (res.data.result.flupStatus == 4) {
                            this.statusValue = '复诊中'
                            this.color = '#9c9c9c'
                            this.disabled = true

                        }
                        // if (res.data.result.flupStatus == 1) {
                        //     this.statusValue = '复诊开始'

                        // }
                        if (res.data.result.flupStatus !== 3) {
//                            if (this.list.patientsDesc.length < 25) {
//	                              document.getElementById('container').style.height = '10rem'
//							} else if (this.list.patientsDesc.length < 38) {
//                                document.getElementById('container').style.height = '12rem'
//							} else if (this.list.patientsDesc.length < 51) {
//                        			document.getElementById('container').style.height = '13rem'
//							}
//                        		else if (this.list.patientsDesc.length < 96) {
//                        			document.getElementById('container').style.height = '16.5rem'
//							}

                        }
                        else {
//                            if (this.list.patientsDesc.length < 25) {
//								document.getElementById('container1').style.height = '15rem'
//							} else if (this.list.patientsDesc.length < 38) {
//								document.getElementById('container1').style.height = '16rem'
//							}

                        }

                    }
                })


           },
           replay(){
           	this.$toast({
           		message:'刷新中',
           	})
           	this.getprocess()
           },
           linkToEval(){
           	window.location.href = './evalution.html?flupid='+this.id+'&userid='+this.patientid
           }
        },
		components:{
		}
        
    });
    app.use(vant);


    app.use(vant.Lazyload);
    app.use(VueViewer.default);

    app.mount('#app');
</script>

</html>